<template>
  <div class="home-page">
    <Header></Header>
    <Banner :bannerList="bannerList"></Banner>
    <div class="home-content">
      <div class="home-course">
        <div class="course-item" v-for="(item, index) in courseList" :key="index" @click="handleCourseClick(item)">
          <img :src="item.img" alt="">
          <div class="item-txt">
            <p>{{ item.title }}</p>
            <span>{{ item.desc }}</span>
          </div>
        </div>
      </div>
      <div class="home-changjing">
        <div class="cjimg">
          <img src="../assets/changjing.png" alt="">
        </div>
        <div class="cjtxt">
          <p class="fangan">人工智能编程教育服务方案</p>
          <div class="title">
            <p class="luodi">人工智能教育<span>多场景落地</span></p>
            <span class="hengxian"></span>
          </div>
          <p class="desc">中科思达结合专业产品、内容及服务全方位赋能，能够向小学、初中、高中及地方教育主管部门提供专业完善可定制的人工智能编程教育落地服务方案，覆盖中小学课后服务课堂、中小学校园编程教育运营服务、区域人工智能编程教育定制等多样化落地建设场景。</p>
          <div class="morebtn">
            <button class="xxbtn" @click="handleAiStudy">AI课程学习</button>
            <button class="xxbtn1" @click="handleAiClick">AI课程详情</button>
          </div>
        </div>
      </div>
      <div class="youshi">
        <div class="ys-content">
          <div class="ys-left">
            <div class="left-title">
              <h5>专业编程赛事平台</h5>
              <span></span>
              <p>众多学生团队参与竞赛，多项国家级编程赛事</p>
            </div>
            <div class="left-list">
              <div class="list-item">
                <div class="item-img">
                  <img src="../assets/icons/dayuan.png" alt="">
                  <span class="shuxian"></span>
                </div>
                <p>支持举办省、市、校各级别赛事</p>
              </div>
              <div class="list-item">
                <div class="item-img">
                  <img src="../assets/icons/dayuan.png" alt="">
                  <span class="shuxian"></span>
                </div>
                <p>配备线上+线下编程作品评分系统</p>
              </div>
              <div class="list-item">
                <div class="item-img">
                  <img src="../assets/icons/dayuan.png" alt="">
                  <span class="shuxian"></span>
                </div>
                <p>配套课程及工具</p>
              </div>
              <div class="list-item">
                <div class="item-img">
                  <img src="../assets/icons/dayuan.png" alt="">
                  <span class="shuxian"></span>
                </div>
                <p>专家+人工智能评审作品</p>
              </div>
              <div class="list-item">
                <div class="item-img">
                  <img src="../assets/icons/dayuan.png" alt="">
                </div>
                <p>支持多类型赛事在线证书查询</p>
              </div>
            </div>
          </div>
          <div class="ys-right">
            <img src="../assets/youshi.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
    <Services></Services>
    <SmallTools></SmallTools>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Banner from "../components/Banner.vue";
import Footer from "../components/Footer.vue";
import Services from "../components/Services.vue";
import SmallTools from "../components/SmallTools.vue";
export default {
  name: "Home",
  components: { Header, Banner, Footer, Services, SmallTools },
  data() {
    return {
      bannerList: [
        {
          url: require("@/assets/banner.png")
        },
      ],
      courseList: [
        {
          type: 'teach',
          img: require("../assets/icons/pingtai.png"),
          title: "教学管理平台",
          desc: "教学管理与课程资源一体化云平台"
        },
        {
          type: 'competition',
          img: require("../assets/icons/fuwu.png"),
          title: "赛事合作服务",
          desc: "编程竞赛一站式办赛 解决方案"
        },
        {
          type: 'tool',
          img: require("../assets/icons/gongju.png"),
          title: "编程学习工具",
          desc: "从图形化到代码的编程 工具矩阵"
        },
        {
          type: 'teacher',
          img: require("../assets/icons/pingtai.png"),
          title: "教师提升",
          desc: "兼职平台，专业培训 合作双赢"
        },
      ],
      userinfo: {},
      token: ''
    };
  },
  mounted() {
    this.userinfo = JSON.parse(localStorage.getItem('userinfo')) || {};
    console.log(this.userinfo, 'userinfo======ssss');
    this.token = this.userinfo.token;
    // location.reload();
  },
  created() {
    console.log(this.$store.getters.isLoggedIn, 'this.$store.getters.isLoggedIn');
    // 检查是否登录
    // if (!this.$store.getters.isLoggedIn) {
    //   this.$router.replace('/login') // 未登录则跳回登录页
    // }
  },
  methods: {
    handleAiClick() {
       this.$router.push({
        path: './courseDetail'
      })
    },
    handleAiStudy() {
      if(!this.token) {
        this.$message.error('请先登录');
        setTimeout(() => {
          this.$router.push('/login');
        },300)
        return;
      }
      this.$router.push({
        path: './courseCenter'
      })
    },
    handleCourseClick(item) {
      console.log(item, 'kkkkkeeee');
      switch (item.type) {
        case 'teacher':
          this.$router.push({
            path: './teachersImprove'
          })
          break;
        default:
          break;
      }
    }
  },
};
</script>

<style lang="less" scoped>
.home-page {
  width: 100%;
  height: 100vh;
  .home-course{
    max-width: 1200px;
    margin: 80px auto;
    display: flex;
    justify-content: space-between;
    .course-item{
      width: 285px;
      height: 120px;
      background: linear-gradient( 135deg, #1084F1 0%, #7AC7FA 100%);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      img{
        width: 72px;
        height: 72px;
      }
      .item-txt{
        margin-left: 20px;
        text-align: left;
        p{
          font-size: 20px;
          color: #FFFFFF;
          margin-bottom: 0px;
        }
        span{
          font-size: 14px;
          color: #FFFFFF;
          // line-height: 20px;
        }
      }
    }
  }
  .home-changjing{
    max-width: 1200px;
    margin: 0 auto 65px auto;
    padding: 65px 22px;
    background: #F7F9FF;
    border-radius: 20px;
    display: flex;
    .cjimg{
      margin-right: 46px;
      img{
        // width: 680px;
        height: 437px;
      }
    }
    .cjtxt{
      .fangan{
        width: 210px;
        height: 32px;
        background: #EDF5FF;
        border-radius: 16px;
        border: 1px solid #78A9FF;
        text-align: center;
        line-height: 32px;
        font-weight: 400;
        font-size: 14px;
        color: #317EF7;
      }
      .title{
        margin-top: 20px;
        .luodi{
          font-weight: 500;
          font-size: 32px;
          color: #1D2129;
          margin-bottom: 10px;
          text-align: left;
          span{
            color: #317AF7;
          }
        }
        .hengxian{
          width: 130px;
          height: 6px;
          background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
          border-radius: 7px;
          display: block;
        }
      }
      .desc{
        margin-top: 25px;
        font-weight: 400;
        font-size: 14px;
        color: #6E7989;
        line-height: 26px;
        text-align: left;
      }
      .morebtn{
        display: flex;
        align-items: center;
        margin-top: 100px;
        .xxbtn{
          width: 170px;
          height: 56px;
          line-height: 56px;
          background: #EDF5FF;
          border-radius: 8px;
          border: 1px solid #78A9FF;
          font-weight: 400;
          font-size: 14px;
          color: #0080FF;
          margin-right: 20px;
          cursor: pointer;
        }
        .xxbtn1{
          width: 170px;
          height: 56px;
          background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
          border-radius: 8px;
          text-align: center;
          line-height: 56px;
          font-size: 14px;
          color: #FFFFFF;
          cursor: pointer;
          border: none;
        }
        
      }
    }
  }
  .youshi{
    background: #3881F8;
    .ys-content{
      max-width: 1200px;
      margin: 0 auto;
      padding: 65px 22px;
      display: flex;
      justify-content: space-between;
      .ys-left{
        // width: 560px;
        text-align: left;
        .left-title{
          h5{
            font-weight: 500;
            font-size: 32px;
            color: #FFFFFF;
            margin-bottom: 10px;
          }
          span{
            width: 65px;
            height: 4px;
            background: linear-gradient( 90deg, #FFFFFF 0%, #FFFFFF 100%);
            border-radius: 7px;
            display: block;
          }
          p{
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            margin-top: 10px;
          }
        }
        .left-list{
          margin-top: 40px;
          .list-item{
            display: flex;
            align-items: flex-start;
            .item-img{
              img{
                width: 28px;
                height: 28px;
              }
              .shuxian{
                width: 1px;
                height: 24px;
                border: 1px dotted #FFFFFF;
                display: block;
                margin: 0 auto;
              }
            }
            p{
              margin-left: 20px;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }
      .ys-right{
        width: 611px;
        height: 344px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        position: relative;
        margin-top: 65px;
        img{
          width: 610px;
          height: 343px;
          position: absolute;
          top: -20px;
          left: 10px;
          opacity: 1;
        }
      }
    }
  }
}
</style>
